// 景区卡片组件
<script setup>
import { useRouter } from 'vue-router'
import { defineProps } from 'vue'
import { userStore } from '@/stores/user.js'
import { getDistance } from '@/utils/index'
import { extractAddressInfo } from '@/utils/index'
import KeywordColor from "@/components/keyword-color/KeywordColor.vue"

const props = defineProps({
  data: Object,
  loading: Boolean,
  keywords: Array
})

const fileUrl = import.meta.env.VITE_FILE_URL

const router = useRouter()

const goScenicDetailClick = () => {
  if (props.loading) {
    return
  }
  router.push(`/pandascenicspot/${props.data.id}`)
}

const getImageUrl = () => {
  const imageList = props.data?.coverImage?.split(',') || []
  return `${fileUrl}/${imageList?.[0]}`
}

const styleObject = {
  'font-size': '1.6rem',
  'font-weight': 'bold',
  'color': '#333333'
}

const keyWordStyleObject = {
  color: '#4FAC91'
}

// console.log(JSON.parse(res.data.imgsTxt))

</script>

<template>
  <div class="card">
    <div v-if="!props.loading" @click="goScenicDetailClick()">
      <div class="image_box">
        <van-image lazy-load width="100%" height="100%" :src="data?.mainImageUrl || data?.img" radius=".8rem">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
      </div>
      <div class="name">
        <h3>
          <KeywordColor :text="data?.scenicAreaName || data?.name || 'XXXX'" :keywords="props.keywords"
            :styleObject="styleObject" :keyWordStyleObject="keyWordStyleObject" />
        </h3>
        <!--        <h3>{{ data?.scenicAreaName || data?.name || 'XXXX' }}</h3>-->
        <div class="tab_list">
          <div class="tab" v-if="data.scenicSpotGrade">{{ data.scenicSpotGrade }}</div>
        </div>
      </div>
      <div class="location">
        <div class="left">
          <img  class="location_img" src="@/assets/images/icons/location_999999.png" alt="">
          <span class="address">{{ extractAddressInfo(props.data?.address) }}</span>
          <span class="line" v-if="data?.distance && data?.address"> | </span>
          <span class="distance" v-if="data?.distance">距您{{ getDistance(data?.distance) }}</span>
        </div>
        <div class="right">
          <div v-if="data?.price" class="preferential">
            <span class="icon">￥</span>
            <span class="price">{{ data?.price }}</span>
            <span>起</span>
          </div>
          <span v-if="data.priceStandard" class="original">￥{{ data.priceStandard }}</span>
        </div>
      </div>
    </div>
    <van-skeleton v-else>
      <template #template>
        <div :style="{ width: '100%' }">
          <van-skeleton-image :style="{ width: '100%' }" />
          <div :style="{ margin: '.8rem 0' }">
            <van-skeleton-paragraph row-width="10rem" />
            <van-skeleton-paragraph row-width="10rem" />
          </div>
        </div>
      </template>
    </van-skeleton>
  </div>
</template>

<style scoped lang="scss">
.card {
  overflow: hidden;
  background-color: #ffffff;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 .7rem 1.5rem 0 rgba(54, 141, 88, 0.05);

  .name {
    display: flex;
    align-items: center;
    margin: 1rem 0 .6rem 0;

    h3 {
      height: 2.2rem;
      line-height: 2.2rem;
      margin-right: .5rem;
    }

    .tab_list {
      .tab {
        height: 1.7rem;
        background: rgba(0, 0, 0, 0.06);
        padding: 0 .6rem;
        border-radius: .3rem;
        opacity: 1;
        width: 16px;
        line-height: 1.7rem;
        font-size: 1.2rem;
        color: #666666;
      }
    }
  }

  .location {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.4rem;
    color: #999999;
    margin-bottom: .5rem;
    width: 100%;

    .left {
      //display: flex;
      //align-items: flex-start;
      flex: 1;

      .location_img {
        width: 1.1rem;
        margin-right: .5rem;
        flex-shrink: 0;
      }

      .address {
        line-height: 1.6rem;
      }

      .line {
        margin: 0 .4rem;
      }

      .distance {
        white-space: nowrap;
      }
    }

    .right {
      display: flex;
      flex-direction: row-reverse;
      align-items: baseline;
      padding-left: 1rem;

      .preferential {
        display: flex;
        align-items: baseline;
        font-size: 1.2rem;
        color: #ED6316;
        padding-left: .5rem;

        .icon {
          flex-shrink: 0;
          font-size: 1.4rem;
        }

        .price {
          flex-shrink: 0;
          font-size: 2.2rem;
          margin-right: .2rem;
        }
      }

      .original {
        text-decoration: line-through;
        color: #999999;
        font-size: 1.4rem;
      }
    }
  }
}</style>
